<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-form ref="serch" :model="serch" :inline="true">
        <el-form-item label="文章类型">
          <el-select size="small" v-model="serch.protype" placeholder="文章类型" class="handle-select mr10">
            <el-option
              v-for="item in searchDic"
              :key="item.id"
              :label="item.dicname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="serch.articletitle" size="small" placeholder="输入文章标题关键字检索" type="primary"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="small" @click="doSearch" plain round>搜索</el-button>
          <router-link :to="{path:'/addNew'}">
            <el-button type="success" class="handle-del mr10" size="small" round icon="el-icon-plus" plain> 添加文章
            </el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="page.list"
      stripe
      :height=500
      style="width: 100%">
      <el-table-column
        header-align="center"
        prop="articletitle"
        label="标题">
      </el-table-column>
      <el-table-column
        header-align="center"
        label="创建日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="typeid"
        label="文章分类">
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="odr"
        label="排序">
      </el-table-column>
      <!--<el-table-column
          prop="content"
          label="内容">
      </el-table-column>-->
      <el-table-column label="操作" header-align="center" width="400">
        <template scope="scope">
          <router-link :to="{path:'/updateNew',query:{articleId: scope.row.id}}">
            <el-button size="small" type="primary" icon="el-icon-edit" round plain>编辑</el-button>
          </router-link>
          <!--<router-link :to="{path:'/addFile',query:{attachmentType:attachmentType,relation:scope.row.id}}">
            <el-button size="small" type="success" round plain>添加附件 <i class="el-icon-upload el-icon&#45;&#45;right"></i>
            </el-button>
          </router-link>-->
          <el-button size="small" type="danger" icon="el-icon-delete" :disabled="scope.row.deleted === true"
                     @click="handleDelete(scope.$index, scope.row)" round plain>删除
          </el-button>
          <router-link :to="{path:'/attachmentRelation',query:{recordId:scope.row.id,modularFlag:1}}">
            <el-button type="success" class="handle-del mr10" size="small" icon="el-icon-upload" round plain> 附件管理
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes:="[10, 20, 30,40, 50,100]"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import common from '../../../common/constant.js'
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item";
  export default {
    components: {ElFormItem},
    data() {
      const current = 1
      return {
        newList: [],
        tableData: [],
        cur_page: 1,
        multipleSelection: [],
        select_cate: '',
        select_word: '',
        article: {
          id: 0,
          articletitle: '',
          createtime: '',
          typeid: '',
          odr: '',
          deleted: '',
          remark: '',
          content: ''
        },
        serch: {
          articletitle: null
        },
        searchDic: [{
          id: 0,
          dicname: ''
        }],
        page: {
          pageNum: 1,
          pageSize: 10,
          size: 2,
          orderBy: null,
          startRow: 3,
          endRow: 4,
          total: 4,
          pages: 2,
          list: [],
          firstPage: 1,
          prePage: 1,
          nextPage: 0,
          lastPage: 2,
          isFirstPage: false,
          isLastPage: true,
          hasPreviousPage: true,
          hasNextPage: false,
          navigatePages: 8,
          navigatepageNums: [
            1,
            2
          ]
        },
        currentPageNum: current,
        attachmentType: common.attachment.news
      }
    },
    created(){
      this.query();
      this.queryDic()
    },
    methods: {
      handleSizeChange(value){
        this.page.pageSize = value
        this.query()
      },
      handleCurrentChange(val) {
        let self = this
        self.page.currentPage = val
        self.query()
      },
      doSearch(){
        this.query()
      },
      queryDic(){
        let self = this
        self.$http.post('/api/dict', {
          'pageSize': self.page.pageSize,
          'pageNum': self.page.currentPage,
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.dic = responseData.pageData.list
              self.searchDic = responseData.pageData.list
            } else {
              self.message_error()
            }
          })
          .catch(function (response) {
            self.message_error()
          })
      },
      query(){
        let self = this;
        self.$http.post('/api/article', {
          'id': self.article.id,
          'articletitle': self.serch.productname,
          'protype': self.serch.protype,
          'pageSize': self.page.pageSize,
          'pageNum': self.page.pageNum,
          'deleted': common.recordStatus.normal
        })
          .then(function (response) {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.page = responseData.pageData
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      handleSelectionChange: function (val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        console.log(row)
      },
      handleDelete(index, row) {
        let self = this
        self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http.get('/api/article/delete/' + row.id)
            .then((response) => {
              let responseData = response.data
              if (responseData.flag === common.respons.seccuss) {
                self.query()
                self.message_ok('删除成功鸟！^_^')
              } else {
                self.message_error('删除文章失败！^_^;')
              }
            })
            .catch(function (response) {
              self.message_error('删除文章异常！^_^;')
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      uploadFile(index, row) {
        console.log(row)
      },
      message_error(message) {
        if (message === null) {
          this.$notify.error({
            title: '错误',
            message: '操作失败'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: message
          });
        }
      },
      message_ok(message) {
        if (message === null) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '成功',
            message: message,
            type: 'success'
          });
        }

      }
    }
  }
</script>
<style scoped>

</style>
